<template>
	<div>
		<div class="i_index_title">
			<span class="index_title">订单详情</span>
			<van-icon class="fanhui" size="30px" @click="fanhui" name="arrow-left" />
		</div>
		<div class="app">
			<div class="buzhou">
				<van-steps :active="active" active-color="#ff0000">
					<van-step>提交</van-step>
					<van-step>识别二维码</van-step>
					<van-step>支付</van-step>
					<van-step>出票</van-step>
				</van-steps>
			</div>
			<div class="erweima">
				<div class="erweima_er">
					<div class="qrcode" ref="qrCodeUrl"></div>
					<!-- <img src="https://p1.ssl.qhimgs1.com/sdr/400__/t017bb1944989d922a7.jpg" alt=""> -->
				</div>
				<p>订单编号：{{list.orderCode}}</p>
			</div>
			<div class="xinxi">
				<div>订单信息</div>
				<ul class="oul">
					<li class="oli">
						<span class="oli_title">彩种:</span>
						<span class="oli_value">{{list.ticketName}}</span>
					</li>
					<li class="oli">
						<span class="oli_title">彩期:</span>
						<span class="oli_value">{{list.amount}}</span>
					</li>
					<li class="oli">
						<span class="oli_title">注数:</span>
						<span class="oli_value">{{list.ticketCount}}</span>
					</li>
					<li class="oli">
						<span class="oli_title">倍数:</span>
						<span class="oli_value">{{list.oneTicketBuyCount}}</span>
					</li>
					<li class="oli">
						<span class="oli_title">金额:</span>
						<span class="oli_value">￥0</span>
					</li>
				</ul>
			</div>
		</div>
		<div>
			<div class="quxiao" @click="quxiao">
				<span class="qu">取消</span>
			</div>
		</div>
	</div>
</template>

<script>
	import { Step, Steps } from 'vant';
	import { Toast } from 'vant';
	import QRCode from 'qrcodejs2'
	import { Dialog } from 'vant';
	export default{
		data(){
			return {
				active:0,
				value:'',
				list:''
			}
		},
		mounted(){
			this.list=this.$route.query
			console.log(this.list)
			this.creatQrCode();
			this.timer = window.setInterval(() => {
        setTimeout(() => {
          this.getList()
        },0)
      },3000)
		},
		components: {
		    [Dialog.Component.name]: Dialog.Component,
		 },
		methods:{
			destroyed() {
			  window.clearInterval(this.timer)
			},
			getList() {
				console.log(window.sessionStorage.getItem('token'))
				this.$axios.post('http://a.chuxingcai.com/prod-api/webapi/order/scanStatus',{
					"orderId": this.list.orderId,
				},{
					headers:{
            token:window.sessionStorage.getItem('token')
          }
				}).then((res) => {
					console.log(res.data.data.canNext);
					if(res.data.data.canNext==1){
						this.value=res.data.data.canNext
						this.destroyed()
						this.active=1
						Toast.loading({
						  forbidClick: true,
						});
						let that=this
						setTimeout(function(){
							that.saoma()
						},1000)
					}
					// this.value=1
					// if(this.value==1){
						
					// }
				})
      },
			fanhui(){
				this.$router.go(-1);
				this.destroyed()
			},
			saoma(){
				this.$axios.post('http://a.chuxingcai.com/prod-api/webapi/order/createPay',{
					"orderId": this.list.orderId
				},{
					headers:{
					  token:window.sessionStorage.getItem('token')
					}
				}).then((res)=>{
					console.log('支付',res)
					this.active=2
					Toast.clear();
					Toast('支付成功');
					let that=this
					setTimeout(function(){
						this.active=3
						that.$router.push({path:'/invoice',query:that.list})
					},1000)
					
				})
			},
			creatQrCode() {
			  var qrcode = new QRCode(this.$refs.qrCodeUrl, {
			    text: this.list.orderCode, // 需要转换为二维码的内容
			    width: 100,
			    height: 100,
			    colorDark: '#000000',
			    colorLight: '#ffffff',
			    correctLevel: QRCode.CorrectLevel.H
			  })
			},
			quxiao(){
				Dialog.confirm({
				  title: '标题',
				  message: '确认取消订单？',
				})
				  .then(() => {
						this.$axios.post('http://a.chuxingcai.com/prod-api/webapi/order/cancel',{
							"orderId": this.list.orderId
						},{
							headers:{
							  token:window.sessionStorage.getItem('token')
							}
						}).then((res)=>{
							console.log(res)
							this.$router.go(-1);
							this.destroyed()
							Toast('取消成功');
						})
				  })
				  .catch(() => {
				    // on cancel
				  });
				
			}
		}
	}
</script>

<style>
	.i_index_title{
		width: 100%;
		height: 50px;
		background-color: #F74A4B;
		position: relative;
	}
	.fanhui{
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		color: white;
	}
	.index_title{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
	.buzhou{
		width: 90%;
		margin: 0 auto;
		border-radius: 5px;
		overflow: hidden;
	}
	.qrcode{
		text-align: center;
	}
	.erweima{
		width: 90%;
		height: 200px;
		background: white;
		border: 1px solid white;
		border-radius: 5px;
		margin: 10px auto;
		text-align: center;
	}
	.xinxi{
		width: 90%;
		height: 200px;
		background: white;
		border: 1px solid white;
		border-radius: 5px;
		margin: 10px auto;
	}
	.erweima_er{
		margin: 20px auto 10px;
		width: 100px;
		height: 120px;
	}
	.erweima_er>img{
		width: 100%;
		height: 100%;
	}
	.oul{
		width: 95%;
		margin: 10px auto;
	}
	.oli{
		height: 30px;
		/* border: 1px solid red; */
		position: relative;
	}
	.oli_title{
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0,-50%);
	}
	.oli_value{
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0,-50%);
	}
	.quxiao{
		width: 90%;
		height: 30px;
		position: relative;
		background-color: white;
		border-radius: 50px;
		margin: 0 auto;
	}
	.qu{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>
